I'm using the TinyMCE 5 editor.

Now I'm trying to find a solution so the editor automatically wraps a table with a certain "div container".

I tried it like that:

tinyMCE.init({
    selector: '#myTextarea',
    plugins: 'table code autolink link lists charmap print preview textcolor code',
    toolbar: 'table code link | undo redo | insert | code',
    menubar: false,
    min_height: 300,
    setup: function (ed) {
       ed.on("keyup", function () {
                var contentmain = tinymce.activeEditor.getContent();
                $('#preview').html(contentmain);
        });
        ed.on("keyup", function () {
            $('.tabledefaultg').wrap('<div class="scroll-bar"></div>');
        });
    }
});

The problem is that <div class="scroll-bar"> doesn't get added inside the editors' source code. It just gets added inside the "preview" container.

How can I fix this problem?

This is the JSFiddle.